import React, { Component } from 'react';
import { Input, Form, Button, Card } from 'antd';

const Input1 = ({ form }) => {
  const { getFieldDecorator, validateFields } = form;

  return (
    <Form
      onSubmit={e => {
        e.preventDefault();
        validateFields((err, data) => {
          console.log(err, data);
        });
      }}
    >
      <Form.Item>{getFieldDecorator('name', {})(<Input placeholder="姓名" />)}</Form.Item>
      <Form.Item>{getFieldDecorator('age', {})(<Input placeholder="年龄" />)}</Form.Item>
      <Form.Item>
        <Button htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};
const Input2 = ({ form }) => {
  const { getFieldDecorator, validateFields } = form;

  return (
    <Form
      onSubmit={e => {
        e.preventDefault();
        validateFields((err, data) => {
          console.log(err, data);
        });
      }}
    >
      <Form.Item>{getFieldDecorator('gender', {})(<Input placeholder="性别" />)}</Form.Item>
      <Form.Item>{getFieldDecorator('address', {})(<Input placeholder="地址" />)}</Form.Item>
      <Form.Item>
        <Button htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};
const InputForm1 = Form.create()(Input1);
const InputForm2 = Form.create()(Input2);

class MoreFormDemo extends Component {
  state = {};

  render() {
    return (
      <div>
        <Card
          title="InputForm1"
          style={{
            marginBottom: 16,
          }}
        >
          <InputForm1></InputForm1>
        </Card>

        <Card
          title="InputForm2"
          style={{
            marginBottom: 16,
          }}
        >
          <InputForm2></InputForm2>
        </Card>
        <Card title="结论">只要两个Form表单用的是不同的Form装饰，那它们两个就是各自独立的。</Card>
      </div>
    );
  }
}

export default MoreFormDemo;
